<template>
    <div class="city">
        <city-header></city-header>
        <city-search :cities="cities"></city-search>
        <city-list :cities="cities" :hotCities="hotCities" :letter="letter"></city-list>
        <city-alpha :cities="cities" @change="getMsg"></city-alpha>
    </div>
</template>

<script>
  import CityHeader from './components/header'

  import CitySearch from './components/search'

  import CityList  from './components/citylist'

  import CityAlpha from  './components/alphabet'

  import axios from 'axios'
    export default {
        name: "City",
      data() {
          return {
            cities:{},
            hotCities:[],
            letter:''
          }
      },
      methods:{
          getMsg (letter) {
            this.letter = letter

          }
      },
      mounted() {
        axios.get('api/city.json').then(response => {
          // console.log(res);
          let res = response.data
          if ( res.ret && res.data ) {
              this.cities = res.data.cities
              this.hotCities = res.data.hotCities
          }
        })

        console.log(this.letter);
      },
      components:{
          CityHeader,
          CitySearch,
          CityList,
          CityAlpha

      }
    }

</script>

<style scoped>

</style>
